{"componentChunkName":"component---src-templates-blog-post-js","path":"/Today I Learned/position:_sticky_값_주기/","result":{"data":{"site":{"siteMetadata":{"title":"JULog","author":"[Ju Chan Hwang]","siteUrl":"https://julog.netlify.app","comment":{"disqusShortName":"","utterances":"JuChanHwang/gatsby-starter-bee"},"sponsor":{"buyMeACoffeeId":"jbee"}}},"markdownRemark":{"id":"57f774d9-61dc-5622-ac44-f3fd610d1d97","excerpt":"sticky가 적용된 엘리먼트의 부모 요소의 height 범위 내에서 fixed으로 작동되지만 그 외의 영여에서 static으로 동작한다. 그렇기 때문에 header나 footer영역에 sticky값을 적용하고 싶을 때, 최상위 엘리먼트를 부모로를 기준으로 sticky bar를 생성한다. 사용 예시 사파리 브라우저 호환 참고 CSS Position Sticky - How It Really Works! CSS Position Sticky","html":"

sticky가 적용된 엘리먼트의 부모 요소의 height 범위 내에서 fixed으로 작동되지만 그 외의 영여에서 static으로 동작한다.

\n

그렇기 때문에 header나 footer영역에 sticky값을 적용하고 싶을 때, 최상위 엘리먼트를 부모로를 기준으로 sticky bar를 생성한다.

\n\n
<app-root>\n\t<header class=\"sticky\"></header>\n\t<body></body>\n</app-root>
\n
.sticky {\n\tposition: sticky;\n\ttop: 0;\n\tdisplay: block;\n}
\n\n
position: -webkit-sticky; \nposition: sticky;
\n
\n

참고

\n
\n","frontmatter":{"title":"position: sticky 값 주기","date":"April 08, 2020"}}},"pageContext":{"slug":"/Today I Learned/position:_sticky_값_주기/","previous":{"fields":{"slug":"/Today I Learned/고정된_헤더와_푸터_스크롤값에_따라_감추기/"},"frontmatter":{"title":"고정된 헤더와 푸터 스크롤값에 따라 감추기","category":"Today I Learned","draft":false}},"next":{"fields":{"slug":"/Today I Learned/Prevent_CSS_hover_on_touch_devices/"},"frontmatter":{"title":"Prevent CSS hover on touch devices","category":"Today I Learned","draft":false}}}},"staticQueryHashes":["3128451518","96099027"]}